// picplay组件实现
window.add_picplay = function(x, y, w, h, images, autoPlay, interval, animationType, arrowState, indicatorMode, hide, tag, css, callback, divid) {
    // 确保参数有默认值
    x = x || 100;
    y = y || 100;
    w = w || 300;
    h = h || 200;
    images = images || [];
    autoPlay = autoPlay || false;
    interval = interval || 3000;
    animationType = animationType || 1;
    arrowState = arrowState || 1;
    indicatorMode = indicatorMode || 1;
    hide = hide || false;
    tag = tag || '';
    css = css || '';
    callback = callback || null;
    
    // 生成唯一ID
    const id = 'picplay_' + Date.now() + '_' + Math.floor(Math.random() * 10000);
    
    // 创建轮播容器
    const container = document.createElement('div');
    container.id = id;
    container.style.position = 'absolute';
    container.style.left = x + 'px';
    container.style.top = y + 'px';
    container.style.width = w + 'px';
    container.style.height = h + 'px';
    container.style.overflow = 'hidden';
    
    // 创建轮播内容区域
    const content = document.createElement('div');
    content.style.position = 'relative';
    content.style.width = '100%';
    content.style.height = '100%';
    
    // 创建图片项
    const items = [];
    images.forEach((img, index) => {
        const item = document.createElement('div');
        item.style.position = 'absolute';
        item.style.width = '100%';
        item.style.height = '100%';
        item.style.backgroundImage = `url(${typeof img === 'string' ? img : img.url})`;
        item.style.backgroundSize = 'cover';
        item.style.backgroundPosition = 'center';
        item.style.display = index === 0 ? 'block' : 'none';
        content.appendChild(item);
        items.push(item);
    });
    
    // 创建箭头
    if (arrowState !== 3) {
        const prevArrow = document.createElement('div');
        prevArrow.innerHTML = '&lt;';
        prevArrow.style.position = 'absolute';
        prevArrow.style.left = '10px';
        prevArrow.style.top = '50%';
        prevArrow.style.transform = 'translateY(-50%)';
        prevArrow.style.cursor = 'pointer';
        prevArrow.style.fontSize = '24px';
        prevArrow.style.color = '#fff';
        prevArrow.style.textShadow = '0 0 5px rgba(0,0,0,0.5)';
        prevArrow.style.zIndex = '10';
        if (arrowState === 1) prevArrow.style.opacity = '0';
        
        const nextArrow = document.createElement('div');
        nextArrow.innerHTML = '&gt;';
        nextArrow.style.position = 'absolute';
        nextArrow.style.right = '10px';
        nextArrow.style.top = '50%';
        nextArrow.style.transform = 'translateY(-50%)';
        nextArrow.style.cursor = 'pointer';
        nextArrow.style.fontSize = '24px';
        nextArrow.style.color = '#fff';
        nextArrow.style.textShadow = '0 0 5px rgba(0,0,0,0.5)';
        nextArrow.style.zIndex = '10';
        if (arrowState === 1) nextArrow.style.opacity = '0';
        
        content.appendChild(prevArrow);
        content.appendChild(nextArrow);
        
        // 鼠标悬停显示箭头
        if (arrowState === 1) {
            container.onmouseenter = function() {
                prevArrow.style.opacity = '1';
                nextArrow.style.opacity = '1';
            };
            container.onmouseleave = function() {
                prevArrow.style.opacity = '0';
                nextArrow.style.opacity = '0';
            };
        }
        
        // 添加箭头点击事件
        // 添加更新指示器状态的函数
        function updateIndicators(id, index) {
            const picplay = elementStore.picplays[id];
            if (!picplay) return;
            const indicatorMode = picplay.animationType;
            const indicators = picplay.element.querySelector(indicatorMode === 1 ? 'div > div:last-child' : 'div:last-child');
            if (indicators) {
                Array.from(indicators.childNodes).forEach((dot, i) => {
                    dot.style.backgroundColor = i === index ? '#009688' : '#ccc';
                });
            }
        }

        prevArrow.addEventListener('click', () => {
            const currentIndex = elementStore.picplays[id].currentIndex;
            const prevIndex = (currentIndex - 1 + images.length) % images.length;
            switchImage(id, prevIndex, arrowState === 3 ? 3 : indicatorMode);
            updateIndicators(id, prevIndex); // 添加更新指示器状态
        });

        nextArrow.addEventListener('click', () => {
            const currentIndex = elementStore.picplays[id].currentIndex;
            const nextIndex = (currentIndex + 1) % images.length;
            switchImage(id, nextIndex, arrowState === 3 ? 3 : indicatorMode);
            updateIndicators(id, nextIndex);
            updateIndicators(id, nextIndex); // 添加更新指示器状态
        });
    }
    
    // 创建指示器
    if (indicatorMode !== 3) {
        const indicators = document.createElement('div');
        indicators.style.position = 'absolute';
        indicators.style.display = 'flex';
        indicators.style.justifyContent = 'center';
        indicators.style.alignItems = 'center';
        indicators.style.width = '100%';
        indicators.style.zIndex = '10';
        
        if (indicatorMode === 1) {
            indicators.style.bottom = '10px';
        } else {
            indicators.style.bottom = '-30px';
        }
        
        images.forEach((img, index) => {
            const dot = document.createElement('div');
            dot.style.width = '10px';
            dot.style.height = '10px';
            dot.style.borderRadius = '50%';
            dot.style.backgroundColor = index === 0 ? '#009688' : '#ccc';
            dot.style.margin = '0 5px';
            dot.style.cursor = 'pointer';
            indicators.appendChild(dot);
        });
        
        if (indicatorMode === 1) {
            content.appendChild(indicators);
        } else {
            container.appendChild(indicators);
        }
        
        // 添加指示器点击事件
        indicators.childNodes.forEach((dot, index) => {
            dot.addEventListener('click', () => {
                switchImage(id, index, arrowState === 3 ? 3 : indicatorMode);
                updateIndicators(id, index); // 添加更新指示器状态
            });
        });
    }
    
    container.appendChild(content);
    
    // 附加样式和标记
    if (css) container.style.cssText += css;
    if (tag) container.setAttribute('data-tag', tag);
    if (hide) container.style.display = 'none';
    
    // 事件处理
    container.onmousemove = function(e) { handleEvent(id, 0, '', tag, e.clientX, e.clientY, null, callback, divid); };
    container.onclick = function(e) { handleEvent(id, 1, '', tag, e.clientX, e.clientY, null, callback, divid); };
    container.oncontextmenu = function(e) { e.preventDefault(); handleEvent(id, 2, '', tag, e.clientX, e.clientY, null, callback, divid); return false; };
    container.onmouseover = function(e) { handleEvent(id, 5, '', tag, e.clientX, e.clientY, null, callback, divid); };
    container.onmouseout = function(e) { handleEvent(id, 6, '', tag, e.clientX, e.clientY, null, callback, divid); };
    container.onkeydown = function(e) { handleEvent(id, 3, '', tag, 0, 0, e.key, callback, divid); };
    container.onkeyup = function(e) { handleEvent(id, 4, '', tag, 0, 0, e.key, callback, divid); };
    
    // 添加到页面或指定父div
    const parent = divid ? document.getElementById(divid) : document.body;
    parent.appendChild(container);
    
    // 初始化picplays存储空间
    if (!elementStore.picplays) {
        elementStore.picplays = {};
    }
    
    // 存储引用
    elementStore.picplays[id] = {
        element: container,
        items: items,
        currentIndex: 0,
        autoPlay: autoPlay,
        interval: interval,
        animationType: animationType
    };
    
    // 自动播放逻辑
    if (autoPlay) {
        const playInterval = setInterval(() => {
            const nextIndex = (elementStore.picplays[id].currentIndex + 1) % images.length;
            // 切换动画
            switch(animationType) {
                case 1: // 左右切换
                    items[elementStore.picplays[id].currentIndex].style.display = 'none';
                    items[nextIndex].style.display = 'block';
                    break;
                case 2: // 上下切换
                    items[elementStore.picplays[id].currentIndex].style.display = 'none';
                    items[nextIndex].style.display = 'block';
                    break;
                case 3: // 渐隐切换
                    items[elementStore.picplays[id].currentIndex].style.opacity = '0';
                    items[nextIndex].style.opacity = '1';
                    items[elementStore.picplays[id].currentIndex].style.display = 'none';
                    items[nextIndex].style.display = 'block';
                    break;
            }
            switchImage(id, nextIndex);
            updateIndicators(id, nextIndex);
        }, interval);
    }
    
    // 监听轮播变化事件
    container.addEventListener('change', function(e) {
        if (callback) {
            callback(id, 7, '', tag, 0, 0, null);
        }
    });
    
    // 监听开关事件
    container.addEventListener('switch', function(e) {
        if (callback) {
            callback(id, 8, '', tag, 0, 0, null);
        }
    });
    
    // 监听设置事件
    container.addEventListener('set', function(e) {
        if (callback) {
            callback(id, 9, '', tag, 0, 0, null);
        }
    });
    
    return id;
}

window.del_picplay = function(id) {
    if (elementStore.picplays[id]) {
        // 清除定时器
        if (elementStore.picplays[id].intervalId) {
            clearInterval(elementStore.picplays[id].intervalId);
        }
        elementStore.picplays[id].element.remove();
        delete elementStore.picplays[id];
    }
}

window.upd_picplay = function(id, x, y, w, h, images, autoPlay, interval, animationType, arrowState, indicatorMode, hide) {
    const picplay = elementStore.picplays[id];
    if (picplay) {
        if (x !== undefined) picplay.element.style.left = x + 'px';
        if (y !== undefined) picplay.element.style.top = y + 'px';
        if (w !== undefined) picplay.element.style.width = w + 'px';
        if (h !== undefined) picplay.element.style.height = h + 'px';
        
        // 更新图片项
        if (images !== undefined) {
            // 实现图片更新逻辑
        }
        
        // 更新自动播放设置
        if (autoPlay !== undefined || interval !== undefined || animationType !== undefined) {
            // 实现自动播放更新逻辑
        }
        
        // 更新箭头状态
        if (arrowState !== undefined) {
            // 实现箭头状态更新逻辑
        }
        
        // 更新指示器模式
        if (indicatorMode !== undefined) {
            // 实现指示器更新逻辑
        }
        
        if (hide !== undefined) picplay.element.style.display = hide ? 'none' : 'block';
    }
}


// 定义切换图片的函数
function switchImage(id, newIndex, indicatorMode) {
    const picplay = elementStore.picplays[id];
    const { items, currentIndex } = picplay;

    // 隐藏当前图片
    items[currentIndex].style.display = 'none';
    // 显示新图片
    items[newIndex].style.display = 'block';

    // 更新当前索引
    picplay.currentIndex = newIndex;

    // 更新指示器状态
    const indicators = picplay.element.querySelector(indicatorMode === 1 ? 'div > div:last-child' : 'div:last-child');
    if (indicators) {
        // 检查是否是指示器元素
        if (indicators.style.display === 'flex') {
            indicators.childNodes.forEach((dot, index) => {
                dot.style.backgroundColor = index === newIndex ? '#009688' : '#ccc';
            });
        }
    }

    // 触发change事件
    picplay.element.dispatchEvent(new Event('change'));
}